<template>
  <div class="login" v-if="this.$store.state.inLogin">
      <!-- v-if="this.$store.state.islogin" -->
      <div class="login_box">
      <!-- 禁止了表单重新加载页面 -->
          <form action="formsubmit" @submit.prevent="submit">
              <section>
                  <div class="section_welcome">欢迎您登录</div>
              </section>
  <!-- <label> 标签的 for 属性是用来指定其关联的表单元素的。在这个例子中，<label> 标签的 for 属性值为 username，它关联了下面的 <input> 元素。 -->

<!-- 这种关联的方式可以使得用户点击 <label> 标签时，关联的表单元素会被聚焦（获得焦点），从而提高表单的可用性和易用性。同时，基于可访问性的考虑，也建议始终为表单元素使用 <label> 标签，并正确设置 for 属性，以允许屏幕阅读器等辅助技术能够正确地报告表单元素的关联信息。 -->
              <section>
                  <div class="section_title" ref="ref_section_user">用户名：</div>
                  <label for="username"></label><input type="text" 
                  v-model="user" name="username" @input="oninput1()">
              </section>
                <section>
                  <div class="section_title" ref="ref_section_password">密码：</div>
                  <label for="password"></label><input @input="oninput2()"
                   type="password" name="password"  v-model="password">
              </section>
                <section>
                  <div class="section_login" @click="submit()">登录</div>
              </section>
               <section>
                    <div class="section_other" @click="toRegister()">注册</div>
                    <div class="section_other">忘记密码？</div> 
              </section>
          </form>
          <div class="login_log" v-loading="loading"></div>
      </div>
      <img src="../img/login_bg.png" alt="" class="login_bg">
  </div>
</template>
<script>
export default {
    data(){
        return{
            user:'',
            password:'',
            login_mess:'',
            login_color:'',
            loading:'',
        }
    },
    // watch:{
    //     username:function(val){
    //         console.log('监听到了',val);
    //        return this.username = val
    //     }
    // }, console.log('拿下来的用户及密码',login_mess); 
// this.$store.commit('login',true) 是用于提交 mutation 的方法。它接受两个参数，第一个参数是要提交的 mutation 名称，第二个参数是要传递给 mutation 的负载(payload)。
    methods:{
        submit(){
            if(this.user == 'admin'){
                if(this.user == 'admin' && this.password == '123456'){
                    this.loading = true
                    this.login_color = 'teal'
                    this.login_mess = '登录成功！'
                    let timer = setInterval(() => {
                        this.loading = ''
                        this.open1()
                        this.$store.commit('login',true)        
                        this.$store.commit('inLoginPage',false)
                        this.$store.commit("changeAdmin",true)
                        this.$store.commit("addAdminMess",{username:'管理员',user:'admin',password:'123456',type:'admin'})
                        this.$router.push({
                            path:'/home'
                        })
                        clearInterval(timer)
                    }, 2000);
                }else{
                    this.loading = true
                    this.login_color = 'red'
                    this.login_mess = '登录失败！'
                     let timer = setInterval(() => {
                        this.loading = ''
                        this.open1()
                        clearInterval(timer)
                    }, 2000);
                }
            }else{
                this.$axios
            .post('api/user_lists/login?user=' + this.user).then(res=>{   
                let login_mess = res.data.params.data
                if(this.user == login_mess.user && 
                this.password == login_mess.password){
                    this.loading = true
                    this.login_color = 'teal'
                    this.login_mess = '登录成功！'
                    let timer = setInterval(() => {
                        this.loading = ''
                        this.open1()
                        // this.$store.commit("changeAdmin",true)
                        this.$store.commit('login',true)        
                        this.$store.commit('inLoginPage',false)
                        this.$router.push({
                            path:'/home'
                        })
                        clearInterval(timer)
                    }, 2000);
                }else{
                    this.loading = true
                    this.login_color = 'red'
                    this.login_mess = '登录失败！'
                     let timer = setInterval(() => {
                        this.loading = ''
                        this.open1()
                        clearInterval(timer)
                    }, 2000);
                }
                }).catch(err=>{
                    console.log(err);
                })
            }

            
        },
        oninput1(){
             if(this.user != ''){
                  this.$refs.ref_section_user.style.transition = 'all 1.5s'
                  this.$refs.ref_section_user.style.transform = 'translateY(-30px)'
              
             }else{
                 this.$refs.ref_section_user.style. transition = 'all 1.5s'
                 this.$refs.ref_section_user.style.transform = 'translateY(0px)'
             }
        },
         oninput2(){
             if(this.password != ''){
                  this.$refs.ref_section_password.style. transition = 'all 1.5s'
                  this.$refs.ref_section_password.style.transform = 'translateY(-30px)'
             }else{
                 this.$refs.ref_section_password.style. transition = 'all 1.5s'
                 this.$refs.ref_section_password.style.transform = 'translateY(0px)'
             }

        },
        toRegister(){
            this.$store.commit('inLoginPage',false)
            this.$store.commit('inRegisterPage',true)
            this.$router.push({
                path:'/register'
            })
           
        },
        open1() {
        const h = this.$createElement;
            this.$notify({
            title: '系统提示',
            // i 元素的作用是用于包裹 this.login_mess 变量的文本内容，并且设置其字体样式为指定的颜色。
            message: h('i', { style: 'color: '+this.login_color},this.login_mess)
            })
        },
        open2() {
            this.$notify({
              title: '系统提示',
              message: '这是一条不会自动关闭的消息',
              duration: 0
            });
          },
    },
    mounted(){
        console.log('回来了');
    },
    created(){
        console.log('created');
    }

}
</script>

<style>
.login{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.login_bg{
    position: relative;
    top: -2%;
    width: 100%;
    height: 122%;
    z-index: -10;
    opacity: 40%;
}
.login_box{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
    height: 400px;
    border: 2px solid #ccc;
    border-radius: 10px;
    display: flex;
}
form{
    width: 60%;
    height: 100%;
    background: #f7f7f7;
    display: flex;
    flex-flow:column;
    border-radius: 10px;
}
.login_log{
    width: 40%;
    background-color: rgba(204, 204, 204, 0.444);
    border-radius: 10px;
}
.section_welcome{
    display: flex;
    width: 100%;
    font-size: 30px;
    color: #407cd5;
}
section{
    margin: 20px 10% 0px 10%;
    width: 50%;
    height: 10%;
    
}
.section_title{
    position: relative;
    top: 30px;
    color: gray;
}
.section_login{
    margin-left: 30px;
    margin-top: 20px;
    width: 75%;
    height: 50px;
    border-radius: 15px;
    background-color: #407cd5;
    color: white;
    font-size: 22px;
    text-align: center;
    line-height: 50px;
}
section:nth-child(5){
    margin-top: 40px;
   width: 50%;
   display: flex;
}
section>.section_other{
    margin-top: 10px;
    width: 80%;
    height: 30px;
    text-align:left;
    line-height: 30px;
    color: gray;
    text-decoration: underline;
} 
input{
    width: 250px;
    height: 30px;
    border: 2px solid transparent;
    background-color: transparent;
    border-bottom: 2px solid gray;  
     outline: none;
    font-size: 20px;
}
input:focus{
   color: black;
     
}
.login_box:focus .section_title{
    user-select:none;
    transform:translateY(-30px);
    transition: all 1.5s;
}

</style>